<template>
	<view  class="bg-light" style="height: 100%;">
		<scroll-view @scrolltolower="onReachScollBottom" scroll-y="true" class="w-100" :style="'height:calc(100vh - 110rpx) '">
			<!-- 地址列表 -->
			<view @click="handle(item)" v-for="(item,index) in tableData" :key="index" class="mx-2 py-2">
				<view class="bg-white py-2 flex align-center rounded-lg">
					<view class="ml-2 w-100 flex flex-column">
						<text class="font mb-2">{{item.Name}} {{item.Phone}}</text>
						<text class="font-sm">{{Address(item)}}</text>
					</view>
					<view @click.stop="handleEdit(item.Member_Address_SerialNumber)" class="flex-shrink mr-2">
						<uni-icons v-if="item.Member_Address_SerialNumber==customerAddress.Member_Address_SerialNumber" type="star-filled" color="#ffc107" size="20"></uni-icons>
						<uni-icons fontFamily="iconfont" color="#828d96" size="20">{{'\ue8cf'}}</uni-icons>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部新增地址 -->
		<view class="fixed-bottom shadow flex align-center justify-between bg-white" style="height: 110rpx;">
			<view @click="handlAdd" class="mx-3 w-100 bg-success px-3 py-2 rounded-circle flex justify-center">
				<text class="text-white font">新增地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import { mapState } from 'vuex';
	import Base64 from "base-64";
	import { generalPaginationQueryBySQLSerialNumber } from "@/api/generalBusiness.js";
	export default {
		data() {
			return {
				form:{//查询地址
					PaginationNumber:1,
					RowAmount:10,
					SQLSerialNumber:'M_business_member_address',
					Condition:'',
					ExtensionCondition:''
				},
				total:0,//总数
				isReach:true,//是否没到底
				tableData:[],//地址
				loading: false,//节流
				customerAddress:{},//默认地址
				isType:'config',//进入类型
			}
		},
		onShow() {
			this.form.PaginationNumber = '1'
			this.getData(this.form)
		},
		onLoad(options) {
			this.isType = options.is?options.is:'config';
		},
		computed: {
			...mapState(['Open_ID','App_ID']),
			Address(){
				return function(item){
					return item.Province + item.City + item.County + item.Details
				}
			}
		},
		methods: {
			async getData(form, onReach = false){
				if(!this.loading){
					this.loading = true;
					uni.showLoading({
						title: "加载中...",
					});
					form.Condition = Base64.encode(`${this.Open_ID},${this.App_ID}`)
					const res = await generalPaginationQueryBySQLSerialNumber(form);
					//判断是否重新开始查询
					if(!onReach) {
						this.form.PaginationNumber = 1
						this.tableData = [];
					}	
					this.tableData.push(...res.Rows);
					this.total = Number(res.TotalRows);
					
					uni.hideLoading();
					this.loading = false;
				}
			},
			onReachScollBottom(){//到底刷新数据
				if(this.isReach){//是否有剩余数据
					if (this.tableData.length < this.total) {
						this.form.PaginationNumber++;
						this.getData(this.form,true)
					} else {
						this.isReach = false;
					}
				}
			},
			handlAdd(){
				uni.navigateTo({
					url:'/pages/delivery/addressAdd'
				})
			},
			handleEdit(Member_Address_SerialNumber){
				uni.navigateTo({
					url:'/pages/delivery/addressEdit?Member_Address_SerialNumber='+Member_Address_SerialNumber
				})
			},
			handle(item){
				if(this.isType=='select'){
					uni.setStorageSync("customerAddress",item);
					uni.navigateBack();
				}
				
			}
		}
	}
</script>

<style>
</style>
